<template>
  <p>person:{{ person }}</p>
  <button @click="changePerson">修改person</button>
  <button @click="person[1] = 9">修改之后的person</button>
  <p>names:{{ names }}</p>
  <button @click="changeNames">修改names</button>
  <button @click="names.data[0] = 'gouzi'">修改之后的names</button>
</template>


<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "",
});
</script>

<script lang="ts" setup>
import {ref,reactive} from "vue";
let person = ref<Array<number>>([1,2,3,4,5]);
let name = reactive({data:["加油","拼博","上进","勤快"]})

const changePerson = () =>{
    // person.value[1] = 8;
  // person.value.splice(1, 1);
  const result = person.value.filter((item)=>{
    return item % 2 !==0;
  });

  person.value = result;
  console.log(person);
  
};
const changeNames =() =>{
  
  // names[1] = "dahuang";
  // names.splice(1, 1);
  /* const result = names.filter((item) => {
    return !item.startsWith("da");
  });

  // console.log(result);
  names = reactive(result); */

  names.data = names.data.filter((item) => {
    return !item.startsWith("da");
  });
};
</script>

<style scoped></style>
